<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container" style="display: flex">
      <div
        class="left"
        v-global-loading="loadingOrderNum"
        style="width: 50%; height: 400px; margin-right: 20px"
      >
        <p style="font-size: 18px; font-weight: 800">今日订单金额</p>
        <p style="font-size: 16px; font-weight: 400">
          ￥{{ formatMoney(amount, true) }}
        </p>
        <div
          id="orderNumRef"
          ref="orderNumRef"
          style="width: 100%; height: 100%"
        ></div>
      </div>
      <div
        class="right"
        v-global-loading="loadingOrderNum"
        style="
          width: 50%;
          height: 400px;
          border-left: 1px solid rgb(224, 216, 216);
          display: flex;
          flex-wrap: wrap;
          padding: 20px;
        "
      >
        <div
          style="width: 50%; height: 200px; color: rgb(109, 103, 103)"
          v-for="item in orderData"
        >
          <div style="font-size: 16px; margin-bottom: 10px; font-weight: 600">
            {{ item.title }}
          </div>
          <div style="font-size: 14px; font-weight: 600; margin-bottom: 10px">
            {{ item.num }}
          </div>
          <div style="margin-bottom: 10px">
            {{ item.lastName }}&nbsp;&nbsp;:&nbsp;&nbsp;{{ item.lastNum }}
          </div>
          <div style="margin-bottom: 10px">
            {{ item.ratioName }}&nbsp;&nbsp;:&nbsp;&nbsp;
            <span
              style="color: #60d086"
              v-if="calculateNum(item.lastNum, item.num) >= 0"
              >-{{ calculateNum(item.lastNum, item.num) }}%</span
            >
            <span v-else style="color: red"
              >+{{ calculateNum(item.lastNum, item.num) * -1 }}%</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, nextTick} from "vue";
import {Line} from "@antv/g2plot";
import {arithmetic, formatMoney} from "@/utils/common";
import {getPayUserNum, orderFinanceLogList} from "@/api/finance/journalAccount";
import dayjs from "dayjs";
const loading = ref(false);
const loadingOrderNum = ref(false);
const orderNumRef = ref();
//今日订单总金额
const amount: any = ref(0);
const orderData = ref([
  {
    title: "今日订单数",
    num: 0,
    lastName: "昨日",
    lastNum: 0,
    ratioName: "日环比"
  },
  {
    title: "今日支付人数",
    num: 0,
    lastName: "昨日",
    lastNum: 0,
    ratioName: "日环比"
  },
  {
    title: "本月订单数",
    num: 0,
    lastName: "上月",
    lastNum: 0,
    ratioName: "月环比"
  },
  {
    title: "本月支付人数",
    num: 0,
    lastName: "上月",
    lastNum: 0,
    ratioName: "月环比"
  }
]);
const calculateNum = (lastNum, num) => {
  if (lastNum == 0 && num != 0) {
    return -100;
  } else if (lastNum == 0 && num == 0) {
    return 0;
  } else {
    return parseInt(String(((lastNum - num) / lastNum) * 100));
  }
};
//右侧数据
const getOrderData = () => {
  getPayUserNum().then((res) => {
    orderData.value[0].num = res.data.nowDayOrderNum;
    orderData.value[0].lastNum = res.data.yesterDayOrderNum;
    orderData.value[1].num = res.data.nowDayPayNum;
    orderData.value[1].lastNum = res.data.yesterDayPayNum;
    orderData.value[2].num = res.data.nowMonthOrderNum;
    orderData.value[2].lastNum = res.data.upMonthOrderNum;
    orderData.value[3].num = res.data.nowMonthPayNum;
    orderData.value[3].lastNum = res.data.upMonthPayNum;
  });
};
getOrderData();
onMounted(() => {});
const orderAmountData: any = ref([]);
//获取左侧数据
const getOrderAmountData = () => {
  let sameDay = dayjs().format("YYYY-MM-DD");
  let yesterday = dayjs().subtract(1, "day").format("YYYY-MM-DD");
  orderFinanceLogList({endTime: sameDay, beginTime: yesterday}).then((res) => {
    let a = res.data.filter((item) => {
      return dayjs(item.tradeTime).format("YYYY-MM-DD") == yesterday;
    });
    let b = res.data.filter((item) => {
      return dayjs(item.tradeTime).format("YYYY-MM-DD") == sameDay;
    });
    orderAmountData.value = [];
    amount.value = 0;
    formatting(a, "昨日");
    formatting(b, "今日");
    nextTick(() => {
      orderAmount();
    });
  });
};
const formatting = (list = [], name = "") => {
  for (let index = 0; index < 24; index++) {
    let a = list.filter((item: any) => {
      return Number(dayjs(item.tradeTime).format("HH")) == index;
    });
    let num: any = 0;
    a.forEach((item: any) => {
      if (item.financeType == 1) {
        num = arithmetic(num, item.amount, "subtract");
        if (name == "今日") {
          amount.value = arithmetic(amount.value, item.amount, "subtract");
        }
      } else {
        num = arithmetic(num, item.amount, "add");
        if (name == "今日") {
          amount.value = arithmetic(amount.value, item.amount, "add");
        }
      }
    });
    orderAmountData.value.push({name, time: index + ":00", num});
  }
};
getOrderAmountData();
const orderAmount = () => {
  const linePlot = new Line("orderNumRef", {
    data: orderAmountData.value,
    xField: "time",
    yField: "num",
    seriesField: "name",
    yAxis: {
      label: {
        // formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
      }
    },
    legend: {
      position: "top"
    },
    smooth: true,
    // @TODO 后续会换一种动画方式
    animation: {
      appear: {
        animation: "path-in",
        duration: 5000
      }
    }
  });
  linePlot.render();
};
</script>
<style lang="less" scoped></style>
